<template>
  <div>
    <VRow class="match-height">
      <VCol
        v-for="statistics in statisticsHorizontal"
        :key="statistics.title"
        cols="12"
        sm="6"
        :lg="12/statisticsHorizontal.length"
      >
        <CardStatisticsHorizontal v-bind="statistics" />
      </VCol>
    </VRow>
    <VRow id="apex-chart-wrapper">
      <VCol cols="8">
        <VCard>
          <VCardItem class="d-flex flex-wrap justify-space-between gap-4">
            <VCardTitle>日期分布图</VCardTitle>
          </VCardItem>

          <VCardText>
            <ApexChartAreaChart 
              :chartInfo="chartInfo"
              :key="chartInfoKey"
            />
          </VCardText>
        </VCard>
      </VCol>
      <VCol cols="4">
        <VCard>
          <VCardItem class="d-flex flex-wrap justify-space-between gap-4">
            <VCardTitle>成功比例图</VCardTitle>
          </VCardItem>
          <VCardText>
            <ApexChartExpenseRatio 
              :triggerCountRunningTotal="triggerCountRunningTotal"
              :triggerCountSucTotal="triggerCountSucTotal"
              :triggerCountFailTotal="triggerCountFailTotal"
              :key="chartInfoKey"
            />
          </VCardText>
        </VCard>
      </VCol>
      <VCol v-if="false" cols="12">
        <CardAdvanceActiveProject />
      </VCol>
    </VRow>
  </div>
</template>

<script setup>
import ApexChartAreaChart from '@/views/liteflow/task/ApexChartAreaChart.vue'
import ApexChartExpenseRatio from '@/views/liteflow/task/ApexChartExpenseRatio.vue'
import CardAdvanceActiveProject from '@/views/liteflow/task/CardAdvanceActiveProject.vue'
import CardStatisticsHorizontal from '@/views/liteflow/task/CardStatisticsHorizontal.vue'

const statisticsHorizontal = reactive([])

const query = async () => {
  const res = await $ivyApi.post(API_URLS.xxljobReportDashboardInfo,{})
  statisticsHorizontal.length = 0
  statisticsHorizontal.push(...res.data)
}

const triggerCountRunningTotal = ref(0)
const triggerCountSucTotal = ref(0)
const triggerCountFailTotal = ref(0)

const chartInfoKey = ref(0)
const chartInfo = reactive({
  triggerDayList: [],
  series: [],
});

const queryChart = async () => {
  const res = await $ivyApi.post(API_URLS.xxljobReportChartInfo,{})
  const result = res.data;
  chartInfoKey.value++
  chartInfo.triggerDayList = result.triggerDayList
  chartInfo.series = [
    { name: '成功', data: result.triggerDayCountSucList},
    { name: '进行中', data: result.triggerDayCountRunningList},
    { name: '失败', data: result.triggerDayCountFailList}
  ]
  triggerCountRunningTotal.value = result.triggerCountRunningTotal
  triggerCountSucTotal.value = result.triggerCountSucTotal
  triggerCountFailTotal.value = result.triggerCountFailTotal
}

const state = reactive({
  timeInter: null,
});

onMounted(() => {
  queryChart()
  state.timeInter = setInterval(() => {
    query()
  }, 1000);
})

onUnmounted(() => {
  clearInterval(state.timeInter);
  state.timeInter = null;
})
</script>

<style scoped>
.date-picker-wrapper {
  inline-size: 140px;
}
</style>
